<template>
  <div id="wrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">用户使用情况</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>

    <div class="tag">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="common.type4"
            :title="'历史访问次数'"
            :num="getNum(visit.visit_total_count)"
            :sub="'次'"
            :to_sub="common.to_sub"
            :cls="common.success"
          ></info-label>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="common.type4"
            :title="'当月访问次数'"
            :num="getNum(visit.current_month_visit_count)"
            :sub="'次'"
            :to_sub="common.to_sub"
            :cls="common.success"
          ></info-label>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="common.type4"
            :title="'今日访问次数'"
            :num="getNum(visit.current_date_visit_count)"
            :sub="'次'"
            :to_sub="common.to_sub"
            :cls="common.success"
          ></info-label>
        </el-col>
      </el-row>
    </div>

    <div class="rank">
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <v-chart
            headerTitle="访问量排名"
            type="bar"
            :data="rank"
            :settings="settings"
            :dataZoom="dataZoom"
            :data-empty="empty"
            :loading="loading">
          </v-chart>
        </el-col>
      </el-row>
    </div>

    <div class="line marT">
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">访问量趋势</div>
              <el-radio-group v-model="selected" style="float: right; padding: 3px 0" size="mini">
                  <el-radio-button label="按年份"></el-radio-button>
                  <el-radio-button label="按月份"></el-radio-button>
                  <el-radio-button label="按日"></el-radio-button>
              </el-radio-group>
            </div>

            <div v-if="selected == '按年份'">
              <v-chart                
                type="line"
                :data="yearLine"
                :settings="settings"
                :dataZoom="dataZoom"
                :data-empty="yearEmpty"
                :loading="lineLoading">
              </v-chart>
            </div>

            <div v-else-if="selected == '按月份'">
              <v-chart                
                type="line"
                :data="monthLine"
                :settings="settings"
                :dataZoom="dataZoom"
                :data-empty="monthEmpty"
                :loading="lineLoading">
              </v-chart>
            </div>

            <div v-else>
              <v-chart                
                type="line"
                :data="dayLine"
                :settings="settings"
                :dataZoom="dataZoom"
                :data-empty="dayEmpty"
                :loading="lineLoading">
              </v-chart>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import common from '@/components/devops/get_data';
import http from '@/views/sys/axios'
import VChart from '@/components/charts/index'
import InfoLabel from '@/components/devops/info_label'

export default {
  name: 'userUsage',
  data() {
    return {
      common,
      visit: {}, 
      loading: false,
      empty: false,
      lineLoading: false,
      yearEmpty: false,
      monthEmpty: false,
      dayEmpty: false,
      selected: '按年份',
      yearLine: {
        columns: ['year', 'counts'],
        rows: []
      },
      monthLine: {
        columns: ['month', 'counts'],
        rows: []
      },
      dayLine: {
        columns: ['day', 'counts'],
        rows: []
      },
      rank: {
        columns: ['username', 'counts'],
        rows: []
      },
      dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
      }],
      settings: {
        labelMap: {
          counts: '访问次数'
        }
      }  
    }
  },
  components: {
    InfoLabel,
    VChart
  },
  created() {
    this.getTag()
    this.getRank()
    this.getLine()
  },
  methods: {
    getTag() {
      http.get(`/api/account/user/visit/info`).then(res => {
        if(res.code == 200) {
          this.visit = res
        } 
      }).catch(error => {
        console.log(error)
      })
    },
    getRank() {
      this.loading = true
      http.get(`/api/account/user/visit/rank`).then(res => {
        if(res.code == 200) {
          this.loading = false
          let sortBy = []
          if(res.personal_visit_rank) {
            sortBy = res.personal_visit_rank
          }
          let sliceRank = sortBy.length>10 ? sortBy.slice(0, 10) : sortBy        
          this.rank.rows = sliceRank.reverse()
          this.rank.rows && this.rank.rows.length ? this.empty = false : this.empty = true
        } else {
          this.loading = false
          this.empty = true
        }    
      }).catch(error => {
        console.log(error)
      })
    },
    getLine() {
      this.lineLoading = true
      http.get(`/api/account/user/visit/trend`).then(res => {
        if(res.code == 200) {
          this.lineLoading = false
          this.yearLine.rows = res.year_visit_trend
          this.yearLine.rows.length ? this.yearEmpty = false : this.yearEmpty = true
          this.monthLine.rows = res.month_visit_trend
          this.monthLine.rows.length ? this.monthEmpty = false : this.monthEmpty = true
          this.dayLine.rows = res.day_visit_trend
          this.dayLine.rows.length ? this.dayEmpty = false : this.dayEmpty = true         
        } else {
          this.lineLoading = false
          this.yearEmpty = true
          this.monthEmpty = true
          this.dayEmpty = true
        }
      })
    },
    compare(property) {
      return (a, b) => {
        let val1 = a[property]
        let val2 = b[property]
        return val1 - val2
      }
    },
    getNum(num) {
      let number
      num ? number = num : number = 0
      return number
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
  #wrapper{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  } 
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
</style>